import  React, { FC,useState,ChangeEvent } from 'react'
import styles from './EditHeader.module.scss'
import { Button,Typography,Space,Input } from 'antd'
import { LeftOutlined,EditOutlined,LoadingOutlined } from '@ant-design/icons'
import { useNavigate, useParams } from 'react-router-dom'
import EditToolbar from './EditToolbar.tsx'
import useGetPageInfo from '../../../hooks/useGetPageInfo.ts'
import { changePageTitle } from '../../../store/pageInfoReducer.ts'
import { useDispatch } from 'react-redux'
import useGetComponentInfo from '../../../hooks/useGetComponentinfo.ts'
import { updateQuestionService } from '../../../service/question.ts'
import { useRequest,useKeyPress,useDebounceEffect } from 'ahooks'
import { message } from 'antd'
const { Title } = Typography

// 显示和修改标题
const TitleElem: FC = ()=>{
    const { title } = useGetPageInfo()
    const [editState,SetEditState] = useState(false)
    const dispatch = useDispatch()

    const handlerChange = (event: ChangeEvent<HTMLInputElement>)=>{
        const newTitle = event.target.value.trim()
        if(!newTitle) return
        dispatch(changePageTitle(newTitle))
    }
    if(editState) {
        return <Input 
        value={title} 
        onBlur={()=>SetEditState(false)} 
        onPressEnter={()=>SetEditState(false)}
        onChange={handlerChange}
        />
    }
    return <Space>
            <Title>{title}</Title>
            <Button icon={<EditOutlined/>} type="text" onClick={()=>SetEditState(true)}></Button>
        </Space>
}

//保存按钮
const SaveButton: FC = ()=>{
    // 获取组件列表
    const { id } = useParams()
    const { componentList = [] } = useGetComponentInfo()
    const pageInfo = useGetPageInfo()

    
    const { loading, run:save } = useRequest(async ()=>{
        if(!id) return 
        await updateQuestionService(id,{...pageInfo,componentList})
    },{manual: true})
    // 自动保存
    useDebounceEffect(()=>{
        save()
    },[componentList,pageInfo],{wait:1000}) // 操作完成后 延迟一秒保存 

    // 保存快捷键
    useKeyPress(['ctrl.s','meta.s'],(event: KeyboardEvent)=>{
        if(!loading){
            event.preventDefault()
            save()
        }
    })
    return <Button 
            onClick={save} 
            disabled={loading}
            icon={loading ? <LoadingOutlined /> : null}
            >保存
            </Button>
}

// 发布按钮
const PublishButton:FC = ()=>{
    const nav = useNavigate()
    const { id } = useParams()
    const { componentList = [] } = useGetComponentInfo()
    const pageInfo = useGetPageInfo()
    const { loading, run:publish } = useRequest(async ()=>{
        if(!id) return 
        await updateQuestionService(id,{...pageInfo,componentList,isPublished: true})
    },{
        manual: true,
        onSuccess(){
            message.success('发布成功')
            nav(`/question/stat/${id}`) // 跳转到统计页面
        }
    })
    return <Button 
    type="primary" 
    onClick={publish}
    disabled={loading}
    icon={loading ? <LoadingOutlined /> : null}
    >发布</Button>
}
// 编辑器头部
const EditHeader:FC = ()=>{
    const nav = useNavigate()
    return <div className={styles['header-wrapper']}>
        <div className={styles.header}>
            {/* 左边 */}
            <div className={styles.left}>
                <Space>
                    <Button type="link" icon={<LeftOutlined />} onClick={()=> nav(-1)}>返回</Button>
                    <TitleElem />
                </Space>
            </div>
            {/* 中间 */}
            <div className={styles.main}>
                <EditToolbar />
            </div>
            {/* 右边 */}
            <div className={styles.right}>
                <Space>
                    <SaveButton />
                    <PublishButton />
                </Space>
            </div>
        </div>
    </div>
}

export default EditHeader